<template>
  <div class="newsinfo-container">
      <!-- <h3>NewsInfo --- {{ $route.params.id}}</h3> -->

      <!-- 大标题 -->
      <h4 class="title">{{ newsInfo.title }}</h4>
      <!-- 二级标题 -->
      <p class="subtitle">
        <span>发表时间 : {{newsInfo.add_time | dateFormat }}</span>
        <span>点击次数 : {{ newsInfo.click }} 次</span>
      </p>
      <hr>
      <!-- 新闻详情内容 -->
      <div class="content" v-html="newsInfo.content"></div>

      <!-- 评论子组件 -->
      <comment-box></comment-box>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';

// 导入子组件
import comment from '../subcomponents/comment.vue';

export default {
  data(){
    return {
      newsInfo : []  // 新闻详情数据
    }
  },
  created(){
    this.getNewsInfo();
  },
  methods : {
    getNewsInfo(){// 获取新闻详情
      // 1.获取到 当前新闻的 id
      // 2.发送请求数据, 获取新闻数据
      // 3.把新闻数据, 保存到 data 上
      // 4.渲染页面
      var id = this.$route.params.id;
      this.$http.get('api/getnew/' + id).then( result => {
        if(result.body.status === 0) {
          this.newsInfo = result.body.message[0];
        }else {
          Toast('获取新闻详情失败')
        }
      })
    }
  },
  components : {
    //注册自己的子组件
    'comment-box' : comment
  }
}
</script>

<style lang="scss" >
    .newsinfo-container {
      padding: 0 3px;
      .title {
        color : red;
        font-size: 16px;
        text-align: center;
        margin: 15px 0;
      }
      .subtitle {
        color : #226aff;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        margin: 0 5px;
      }
      .content {
        img {
          width: 100%;
        }
      }
    }
</style>




